import React from 'react';
import './index.less';
import { Card, Button, Modal} from 'antd';
export default class Buttons extends React.Component{ 
    state = {
        showModal1:false,
        showModa2:false,
        showModal3:false,
        showModal4:false
    }
    handleOpen = (type) => {
        this.setState({
           [type]:true
        })
    }
    handleConfirm = (type) => {
        // var a = {
        //     confirm : function() {}
        // }
        // a.confirm()
        // a['confirm']
        Modal[type]({
            title:'确认？',
            content:'你确定学会React了吗',
            onOk() {
                console.log("ok")
            },
            onCancel() {
                console.log('cancel')
            }
        })
    }
    render() {
        return ( 
            <div>
                <Card title="基础模态框" className="card-wrap">
                    <Button type="primary" onClick={() => this.handleOpen('showModal1')}>Open</Button>
                    <Button type="primary" onClick={() => this.handleOpen('showModal2')}>自定义页脚</Button>
                    <Button type="primary" onClick={() => this.handleOpen('showModal3')}>顶部20px弹窗</Button>
                    <Button type="primary" onClick={() => this.handleOpen('showModal4')}>水平居中</Button>
                 </Card>
                 <Card title="信息确认框" className="card-wrap">
                    <Button type="primary" onClick={() => this.handleConfirm('confirm')}>Confirm</Button>
                    <Button type="primary" onClick={() => this.handleConfirm('info')}>Info</Button>
                    <Button type="primary" onClick={() => this.handleConfirm('success')}>Success</Button>
                    <Button type="primary" onClick={() => this.handleConfirm('warning')}>Waring</Button>
                 </Card>
                    <Modal
                        title = "React"
                        visible = {this.state.showModal1}
                        onCancel = {() => {
                            this.setState({
                                showModal1:false
                            })
                        }}
                    >
                            <p>欢迎学习慕课新推出的React高级课</p>
                    </Modal>
                    <Modal
                        title = "React"
                        visible = {this.state.showModal2}
                        okText = "好的"
                        cancelText = "算了"
                        onCancel = {() => {
                            this.setState({
                                showModal2:false
                            })
                        }}
                    >
                            <p>欢迎学习慕课新推出的React高级课</p>
                    </Modal>
                    <Modal
                        title = "React"
                        visible = {this.state.showModal3}
                        style={{top:20}}
                        onCancel = {() => {
                            this.setState({
                                showModal3:false
                            })
                        }}
                    >
                            <p>欢迎学习慕课新推出的React高级课</p>
                    </Modal>
                    <Modal
                        title = "React"
                        visible = {this.state.showModal4}
                        wrapClassName="vertical-center-modal"
                        onCancel = {() => {
                            this.setState({
                                showModal4:false 
                            })
                        }}
                    >
                            <p>欢迎学习慕课新推出的React高级课</p>
                    </Modal>
                
            </div>
        )
    }
}
  